<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线购物系统 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-md active:scale-95;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-secondary/90 hover:shadow-md active:scale-95;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="MainServlet?method=index" class="flex items-center space-x-2">
                        <i class="fa fa-shopping-bag text-2xl text-primary"></i>
                        <span class="text-xl font-bold text-neutral-700">ShopEase</span>
                    </a>
                </div>
                
                <nav class="hidden md:flex space-x-8">
                    <a href="MainServlet?method=index" class="text-neutral-700 hover:text-primary font-medium transition-colors">首页</a>
                    <a href="MainServlet?method=showProduct" class="text-neutral-700 hover:text-primary font-medium transition-colors">商品</a>
                    <a href="#" class="text-neutral-700 hover:text-primary font-medium transition-colors">关于我们</a>
                </nav>
                
                <div class="flex items-center space-x-4">
                    <a href="seller_login.jsp" class="hidden sm:block px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">
                        卖家登录
                    </a>
                    <button class="md:hidden text-neutral-700" id="mobile-menu-button">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="MainServlet?method=index" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100">首页</a>
                <a href="MainServlet?method=showProduct" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100">商品</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100">关于我们</a>
                <a href="seller_login.jsp" class="block px-3 py-2 rounded-md text-base font-medium text-primary hover:bg-primary/5">卖家登录</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="relative bg-gradient-to-r from-primary/90 to-primary overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0 bg-[url('https://picsum.photos/id/1067/1920/1080')] bg-cover bg-center"></div>
        </div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 relative z-10">
            <div class="max-w-3xl">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-6">
                    轻松购物，<br>便捷生活新体验
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-xl">
                    我们提供优质商品和安全交易保障，让您的购物体验更加愉悦和安心。
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="MainServlet?method=showProduct" class="btn-secondary text-center">
                        浏览商品 <i class="fa fa-arrow-right ml-2"></i>
                    </a>

                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-neutral-100 to-transparent"></div>
    </section>

    <!-- 特色区域 -->
    <section class="py-16 bg-neutral-100">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-4">为什么选择我们</h2>
                <p class="text-neutral-500 max-w-2xl mx-auto">我们致力于提供最优质的购物体验，从商品质量到交易安全，全方位保障您的权益</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl p-8 shadow-sm card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-shield text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral-700 mb-3">安全交易</h3>
                    <p class="text-neutral-500">双重确认机制保障交易安全，买家卖家双方权益都能得到充分保护。</p>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-sm card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-star text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral-700 mb-3">优质商品</h3>
                    <p class="text-neutral-500">严格筛选每一件商品，确保您购买到的都是品质有保障的优质产品。</p>
                </div>
                
                <div class="bg-white rounded-xl p-8 shadow-sm card-hover">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-headphones text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral-700 mb-3">贴心服务</h3>
                    <p class="text-neutral-500">专业客服团队随时为您解答疑问，解决购物过程中遇到的各种问题。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 流程展示 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-4">简单三步，完成交易</h2>
                <p class="text-neutral-500 max-w-2xl mx-auto">我们简化了购物流程，让您轻松完成交易</p>
            </div>
            
            <div class="relative">
                <!-- 连接线 -->
                <div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-neutral-200 -translate-y-1/2 z-0"></div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-10">
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mb-6 shadow-lg">1</div>
                        <h3 class="text-xl font-bold text-neutral-700 mb-3">浏览并选择商品</h3>
                        <p class="text-neutral-500">浏览商品详情，选择您心仪的商品</p>
                    </div>
                    
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mb-6 shadow-lg">2</div>
                        <h3 class="text-xl font-bold text-neutral-700 mb-3">提交购买意向</h3>
                        <p class="text-neutral-500">填写购买信息，提交您的购买意向</p>
                    </div>
                    
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mb-6 shadow-lg">3</div>
                        <h3 class="text-xl font-bold text-neutral-700 mb-3">确认完成交易</h3>
                        <p class="text-neutral-500">双方确认后，完成交易流程</p>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <a href="MainServlet?method=showProduct" class="btn-primary inline-flex items-center">
                    开始购物 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral-700 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-shopping-bag text-2xl text-white"></i>
                        <span class="text-xl font-bold">ShopEase</span>
                    </div>
                    <p class="text-neutral-300 mb-6">让购物变得轻松愉快，为您提供优质的商品和服务。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors"><i class="fa fa-instagram"></i></a>
                    </div>
                </div>
                
           
                
               
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">杭州市下沙区浙江工商大学</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">19012356489</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-neutral-300"></i>
                            <span class="text-neutral-300">2868000391@qq.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-600 pt-8 text-center text-neutral-400">
                <p>&copy; 2025 ShopEase 在线购物系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>